<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>备份管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
    <style type="text/css">
        .spinner {
            margin: 100px auto;
            width: 50px;
            height: 60px;
            text-align: center;
            font-size: 10px;
            position: absolute;
            top: 30%;
            left: 47%;
        }

        .spinner > div {
            background-color: #67CF22;
            height: 100%;
            width: 6px;
            display: inline-block;

            -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
            animation: stretchdelay 1.2s infinite ease-in-out;
        }

        .spinner .rect2 {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
        }

        .spinner .rect3 {
            -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
        }

        .spinner .rect4 {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }

        .spinner .rect5 {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
        }

        @-webkit-keyframes stretchdelay {
            0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
            20% { -webkit-transform: scaleY(1.0) }
        }

        @keyframes stretchdelay {
            0%, 40%, 100% {
                transform: scaleY(0.4);
                -webkit-transform: scaleY(0.4);
            }  20% {
                   transform: scaleY(1.0);
                   -webkit-transform: scaleY(1.0);
               }
        }
    </style>
</head>
<body>
<div class="spinner" id="loading" style="display: none;">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
                <button class="layui-btn layuiadmin-btn-role" data-type="add">新建备份</button>
            </div>

            <table id="table" lay-filter="table"></table>
            <script type="text/html" id="table-useradmin-admin">

                <a class="layui-btn  layui-btn-xs layui-btn-warm" lay-event="download"><i
                        class="layui-icon layui-icon-download-circle"></i>下载</a>
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="restore"><i
                        class="layui-icon layui-icon-engine"></i>还原</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
            </script>
        </div>
    </div>
</div>
<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table'], function () {
        var $ = layui.$
            , form = layui.form
            , table = layui.table;

        //创建表格
        table.render({
            elem: '#table'
            , url: "{:url('admin/website/backup')}"
            , cols: [[
                {field: 'bak_id', width: 80, title: 'ID', sort: true, align: 'center'}
                , {field: 'bak_description', title: '备份描述', align: 'center'}
                , {field: 'adm_realname', title: '创建人', align: 'center'}
                ,{field: 'bak_create_time', title: '创建时间',align: 'center'}
                , {title: '操作', minWidth: 150, align: 'center', fixed: 'right', toolbar: '#table-useradmin-admin'}
            ]]
            , text: {
                none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
            }
        });

        //监听工具条
        table.on('tool(table)', function (obj) {
            var data = obj.data;
            //{bak_id: 2, bak_name: "20190917202832.sql", bak_description: "第一次备份", bak_size: 8.33, bak_admin_id: 1, …}
            if (obj.event === 'download') {
                window.location.href="{:url('admin/website/download')}?bak_name="+data.bak_name;
            }
            if (obj.event === 'restore') {
                layer.confirm('确定将数据还原到该时间点？', function (index) {
                    //从table中删除该信息
                    $.ajax({
                        url: "{:url ('admin/website/restore')}?bak_id=" + data.bak_id+"&bak_name="+data.bak_name,
                        type: "post",
                        dataType: "json",
                        success: function (res) {
                            if (res.code == 1) {
                                layer.msg(res.msg, {icon: 1, time: 2000}, function () {
                                });
                            } else {
                                layer.msg(res.msg, {icon: 5, time: 1500}, function () {
                                });
                            }
                        }
                    })
                    layer.close(index);
                });
            }
            if (obj.event === 'del') {
                layer.confirm('确定删除此备份？', function (index) {
                    //从table中删除该信息
                    $.ajax({
                        url: "{:url ('admin/website/delete')}?bak_name=" + data.bak_name+"&bak_id="+data.bak_id,
                        type: "post",
                        dataType: "json",
                        success: function (res) {
                            if (res.code == 1) {
                                layer.msg(res.msg, {icon: 1, time: 1500}, function () {
                                    obj.del();
                                });
                            } else {
                                layer.msg(res.msg, {icon: 5, time: 1500}, function () {
                                });
                            }
                        }
                    })
                    layer.close(index);
                });
            }


        });

        //监听switch 开关，用来直接在列表中修改状态，而不是在编辑里面修改
        // form.on('switch(switchTest)', function(data){
        //     //获取当前switch 的数据 ：
        //     // 1. 在value上绑定数据id = data.value
        //     // 2. 获取这个开关的状态 = data.elem.checked
        //     var value=data.value;
        //     var checked=data.elem.checked?1:0;
        //
        //     $.ajax({
        //         url: "{:url ('admin/admin/changeType')}",
        //         type: "post",
        //         dataType: "json",
        //         data:{
        //             "rol_id":value,
        //             "rol_type":checked
        //         },
        //         success: function (res) {
        //             layer.msg(res.msg, {time: 1500}, function () {
        //             });
        //         }
        //     })
        //
        // });

        //事件
        var active = {
            //批量删除操作
            // batchdel: function(){
            //     var checkStatus = table.checkStatus('table')
            //         ,checkData = checkStatus.data; //得到选中的数据
            //
            //     //checkData：{{rol_id: 6, rol_name: "测试角色3", rol_list: "", rol_remark: "123", rol_type: 0},
            //     //            {rol_id: 7, rol_name: "123", rol_list: "", rol_remark: "123", rol_type: 0}}
            //     if(checkData.length === 0){
            //         return layer.msg('请选择数据');
            //     }
            //
            //     //将要删除的id，组装为逗号分割的字符串
            //     var ids="";
            //     for(var i=0;i<checkData.length;i++){
            //         ids+=checkData[0]['rol_id']+",";
            //     }
            //
            //     layer.confirm('确定删除吗？', function(index) {
            //
            //         //发送ajax请求，删除指定的数据
            //         $.ajax({
            //             url: "{:url ('admin/admin/delMultiRole')}",
            //             type: "post",
            //             data: {
            //                 "ids":id
            //             },
            //             dataType: "json",
            //             success: function (res) {
            //                 if (res.code == 1) {
            //                     layer.msg(res.msg, {icon: 1, time: 1500}, function () {
            //                     });
            //                 } else {
            //                     layer.msg(res.msg, {icon: 5, time: 1500}, function () {
            //                     });
            //                 }
            //             }
            //         })
            //         table.reload('table');
            //     });
            // },
            //添加新角色
            add: function () {
                layer.open({
                    type: 2
                    , title: '添加备份'
                    , content: "{:url ('admin/website/backupsAdd')}"
                    , area: ['600px', '240px']
                    , btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index]
                            , submit = layero.find('iframe').contents().find("#submit");

                        //监听提交
                        iframeWindow.layui.form.on('submit(submit)', function (data) {
                            var field = data.field; //获取提交的字段
                            //{bak_description: "123"}
                            $.ajax({
                                url: "{:url ('admin/website/backupsAdd')}",
                                type: "post",
                                data: field,
                                dataType: "json",
                                beforeSend:function(){
                                    layer.close(index); //关闭弹层
                                    //显示loading
                                    $("#loading").css("display","block");
                                },
                                success: function (res) {
                                    $("#loading").css("display","none");
                                    if (res.code == 1) {

                                        layer.msg(res.msg, {icon: 1, time: 1500}, function () {
                                            //重载表格
                                            table.reload('table');
                                        });
                                    } else {
                                        layer.msg(res.msg, {icon: 5, time: 1500}, function () {
                                        });
                                    }
                                }
                            })
                        });
                        submit.trigger('click');
                    }
                });
            }
        }
        $('.layui-btn.layuiadmin-btn-role').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>
</html>

